<template>
  <div class="cloud-stock-apply-for">
    <c-title text="门店审核"></c-title>
    <div class="flex space-evenly align-items-center bg-fff" style="padding: 0.5rem 0; font-size: 0.9375rem;">
      <span v-for="(item, i) in status_list" @click="choose(item.apply_status, i)"
        :class="current_index == i ? 'current' : 'opac'">{{ item.text }}</span>
    </div>
    <div class="wrapper">
      <div class="item" v-for="item in list" :key="item.id" @click="store_applyfor_details(item.id)">
        <div style="padding: 0.75rem 1rem 1.25rem 0.8125rem;">
          <div class="space-between flex">
            <span style="color: #999; font-size: 0.75rem;">{{ item.created_at }}</span>
            <div style="font-size: 0.75rem; display: flex; justify-content: center;" :class="{ 'wait': item.status == 0 }"
              class="pass">
              <img v-if="item.status == !0" class="store-icon"
                src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store-cashier/audit_pass.png" />
              <img v-else class="store-icon"
                src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store-cashier/audit_wait.png" />
              <span style="margin-left: 0.25rem;"> {{ item.status_name }}</span>
            </div>
          </div>
          <div class="flex align-items-center" style="margin-top: 1.3438rem; margin-bottom: 0.8438rem;">
            <img style="width: 1.5rem; border-radius: 100px; margin-right: 0.25rem;"
              :src="item.avatar" alt="">
            <span style="font-size: 0.9375rem; font-weight: bold;">{{ item.nickname }}</span>
          </div>
          <div class="text-left" v-if="item.information">
            {{ item.information.store_name }}
          </div>
        </div>
        <div class="group-btn" v-if="item.status == 0">
          <div style="display: flex; align-items: center;">
            <img style="width: 1rem; margin-right: 0.25rem;" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store-cashier/reject.png"  />
            <span @click.stop="apply_handle('cancel', item.id)" style="color: #999;">驳回</span>
          </div>
          <div style="display: flex; align-items: center;">
            <img style="width: 1rem; margin-right: 0.25rem;" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store-cashier/pass.png"  />
            <span @click.stop="apply_handle('pass', item.id)" style="color: #34ae59;">通过</span>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current_index: 0,
      list: [],
      page: 1,
      total_page: 1,
      isLoadMore: false,
      status_list: [
        {
          text: "全部",
          apply_status: 0
        },
        {
          text: "待审核",
          apply_status: 1
        },
        {
          text: "审核通过",
          apply_status: 2
        }
      ]
    };
  },
  activated() {
    this.isLoadMore = false;
    this.getData()
  },
  methods: {
    store_applyfor_details(id){
      this.$router.push(this.fun.getUrl('store_applyfor_details',{id}))
    },
    apply_handle(type, id) {
      let message = '';
      if (type == 'pass') {
        message = "是否确认通过该门店申请？"
      } else {
        message = "是否确认驳回该门店申请？"
      }
      this.$dialog.confirm({
        message,
      }).then(() => {
        let url = '';
        if (type == 'pass') {
          url = 'plugin.store-cashier.frontend.store.parent-apply.accept';
        } else {
          url = 'plugin.store-cashier.frontend.store.parent-apply.reject';
        }
        $http.post(url, { id }, 'loading').then(res => {
          if (res.result == 0) {
            return this.$toast(res.msg)
          }
          this.$toast(res.msg);
          this.getData({apply_status:this.current_index})

        })
      })
        .catch(() => {
          // on cancel
        });
    },
    async getData(json) {
      let { result, msg, data: { data, current_page, last_page } } = await $http.post('plugin.store-cashier.frontend.store.parent-apply.index', json, 'loading');
      if (result == 0) {
        return this.$toast(msg);
      }
      this.page = current_page;
      this.total_page = last_page;
      if (current_page == 1) {
        this.list = data || [];
      } else {
        this.list = this.list.concat(data);
      }
    },
    getMoreData() {
      if (this.page >= this.total_page) {
        return;
      }
      this.isLoadMore = true;
      let page = this.page + 1;
      let json = {
        apply_status:this.current_index,
        page
      };
      this.getData(json)
    },
    choose(apply_status, i) {
      this.current_index = i;
      this.getData({ apply_status, page: 1 })
    }

  }
};
</script>

<style scoped lang="scss">
.cloud-stock-apply-for {
  .group-btn {
    display: flex;
    justify-content: space-around;
    margin: 0 0.75rem;
    border-top: 1px solid #e7e7e7;
    padding: 0.75rem 0;
    position: relative;

    &::after {
      position: absolute;
      content: '';
      height: 100%;
      width: 1px;
      left: 50%;
      top: 0;
      background: #e7e7e7;
    }
  }

  .store-icon {
    width: 1rem;
  }

  .bg-fff {
    background-color: #fff;
  }

  .opac {
    background-color: #fff;
    border-radius: 100px;
    padding: 0.125rem 1.25rem;
  }

  .current {
    color: #fff;
    background-color: #e32323;
    padding: 0.125rem 1.25rem;
    border-radius: 100px;
  }

  .space-evenly {
    justify-content: space-evenly;
  }

  .pb34 {
    padding-bottom: 1.0625rem;
  }

  .text-left {
    text-align: left;
  }

  img {
    margin: 0;
  }

  .wait {
    color: #ef5452 !important;
  }

  .pass {
    color: #34ae59;
  }

  .align-items-center {
    align-items: center;
  }

  .space-around {
    justify-content: space-around;
  }

  .space-between {
    justify-content: space-between;
  }

  .flex {
    display: flex;
  }

  .wrapper {
    padding: 0.6rem 0.8rem;
  }

  .item {
    border-radius: 0.3125rem;
    background-color: rgba(255, 255, 255, 1);
    margin-bottom: 0.5rem;
  }
}
</style>
